<template>
  <div class="extendForm" ref="extendBaseForm">
    <base-form :formState="formState" :noWatermark="1" @deleteWhiteList="deleteWhiteList" @getIndex="getIndex"
      @addGreyWhitelist="addGreyWhitelist" @selectWaterMarkPosition="selectWaterMarkPosition"
      @uploadFinished="uploadFinished" @upload_remove_Finished="upload_remove_Finished" ref="getbaseForm">
    </base-form>
    <div class="hrefTo" v-if="formState.length">
      <a-anchor :getContainer="() => extendBaseForm" @click="(e: any, link: any) => e.preventDefault()" offsetTop="10">
        <a-anchor-link v-for="(section, section_index) in formState" :key="section_index" :href="'#' + section.id"
          :title="section.value" />
      </a-anchor>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick, onMounted, onBeforeMount } from "vue";
import { dataSourceType } from "@/type.d";
import { extendForm } from "./formCofig";
import { cloneDeep } from "lodash";
import baseForm from "@/components/form/baseForm.vue";
import request from "@/api/index";
import { useRouter } from "vue-router";
// props
const props = defineProps({
  extendInfo: {
    type: Object,
    default: {},
  },
  id: {
    type: Number,
    default: 1,
  },
});
// data
const router = useRouter();
const formState = ref<dataSourceType[]>(cloneDeep(extendForm));
console.log(formState, 'formState');
const sectionIndex = ref<number>(0);
const formItemIndex = ref<number>(0);
const ID = ref<number>(0);

const extendBaseForm = ref();
const getbaseForm = ref();
//watch
watch(
  () => props.extendInfo,
  (newVal, oldVal) => {
    if (!newVal) {
      formState.value = cloneDeep(extendForm);
      return;
    }
    if (JSON.stringify(newVal)) {
      formState.value.forEach((item) => {
        if (newVal.hasOwnProperty(item.id)) {
          item.children.forEach((data: dataSourceType) => {
            if (newVal[item.id]?.hasOwnProperty(data.param)) {
              if (data.value instanceof Array) {
                data.value = [];
                if (data.picIdPram) {
                  // 图片格式
                  let obj = {
                    uid: newVal[item.id][data.picIdPram],
                    url: newVal[item.id][data.param],
                  };
                  if (newVal[item.id][data.picIdPram] && newVal[item.id][data.param]) {
                    data.value.push(obj);
                    data.picId = newVal[item.id][data.picIdPram];
                  }

                } else {
                  // 多选格式
                  newVal[item.id][data.param] &&
                    newVal[item.id][data.param] instanceof Array
                    ? (data.value = newVal[item.id][data.param])
                    : data.value.push(newVal[item.id][data.param]);
                }
              } else {
                if (
                  data.param == "greyWhitelist" &&
                  newVal[item.id][data.param]
                ) {
                  data.value = newVal[item.id][data.param][0];
                  data.greyWhitelist = [];
                  newVal[item.id][data.param].forEach(
                    (glist: dataSourceType, index: number) => {
                      if (index > 0) {
                        data.greyWhitelist.push({
                          value: glist,
                        });
                      }
                    }
                  );
                } else {
                  if (data.param == 'uploadVideoSize') {
                    console.log(newVal[item.id][data.param], 'newVal[item.id][data.param]')
                  }
                  data.value =
                    newVal[item.id][data.param] != null
                      ? newVal[item.id][data.param]
                      : "";
                }
              }
              if (
                data.hasOwnProperty("optionsValue") &&
                newVal[item.id].hasOwnProperty(data.params_options)
              ) {
                data.optionsValue = newVal[item.id][data.params_options];
              }
            }
          });
        }
      });
    }
  }
);

//methods
// 获取FTPlist 
const fetchSysConfigFtpOssList = async () => {
  const FTPlist = await request.fetchSysConfigFtpList({});
  const OSSlist = await request.fetchSysConfigOssList({});
  nextTick(() => {
    FTPlist.forEach((item: any) => {
      item.value = item.id;
      item.label = item.name;
    })
    OSSlist.forEach((item: any) => {
      item.value = item.id;
      item.label = item.name;
    })
    formState.value[formState.value.length - 1].children[17].options = FTPlist;
    formState.value[formState.value.length - 1].children[18].options = OSSlist;
  })
}
// 获取index
const getIndex = (section_index: number, formItem_index: number) => {
  sectionIndex.value = section_index;
  formItemIndex.value = formItem_index;
};
// 上传图片返回值
const uploadFinished = (data: any) => {
  if (data) {
    formState.value[sectionIndex.value].children[
      formItemIndex.value
    ].value.splice(0, 1);
    formState.value[sectionIndex.value].children[
      formItemIndex.value
    ].value.push(data[0]);
    formState.value[sectionIndex.value].children[formItemIndex.value].picId =
      data[0].id;

    if (getbaseForm.value) {
    }
  }
};
// 删除图片
const upload_remove_Finished = (data: any) => {
  setTimeout(() => {
    formState.value[sectionIndex.value].children[
      formItemIndex.value
    ].value.splice(0, 1);
    getbaseForm.value.baseForm
      .validate([sectionIndex.value, "children", formItemIndex.value, "value"])
      .then((res: any) => { });
  }, 10);
};
// 选择水印位置
const selectWaterMarkPosition = async (
  section_index: number,
  formItem_index: number,
  watermark_item_index: number
) => {
  formState.value[section_index].children[formItem_index].value =
    watermark_item_index;
};
// 删除新增的白名单
const deleteWhiteList = async (
  section_index: number,
  formItem_index: number,
  greylist_index: number
) => {
  formState.value[section_index].children[formItem_index].greyWhitelist.splice(
    greylist_index,
    1
  );
};
// 新增白名单
const addGreyWhitelist = async (
  section_index: number,
  formItem_index: number
) => {
  let obj = formState.value[section_index].children[formItem_index];
  if (
    formState.value[section_index].children[formItem_index].greyWhitelist
      .length >= 10
  ) {
    return;
  }
  formState.value[section_index].children[formItem_index].greyWhitelist.push({
    value: "",
    placeholder: obj.placeholder,
    rule: obj.rule,
  });
};
//锚点跳转
const handlerDefault = (e: any, link: any) => {
  e.preventDefault();
};
//onBeforeMount
onMounted(() => {
  nextTick(() => {
    fetchSysConfigFtpOssList();
  })

})
// defineExpose
defineExpose({ getbaseForm, formState });
</script>
<style lang="less" scoped>
.extendForm {
  height: 100%;
  overflow-y: auto;

  .hrefTo {
    position: absolute;
    padding-right: 10px;
    top: 64px;
    background: #fff;
    z-index: 1;
    right: 0px;
  }
}
</style>
